/**
 * Created by ClearLiang on 2019/4/17
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, Image} from 'react-native';
import { WebView } from 'react-native-webview';

export default class Input_Main extends Component {


    // 初始化state
    constructor(props) {
        super(props);
        this.state = {
            text:'',
            isShow: false,
        };
    }

    // 加载后
    componentDidMount(): void {
        console.log('componentDidMount')
    }

    // 移除前
    componentWillUnmount(): void {
        console.log('componentWillUnmount')
    }

    _onClick = ()=>{
        //alert(this.state.text);
        this.refs.input.blur();
        this.setState({
            isShow:!this.state.isShow,
        })
    };

    _getValue = (text)=>{

    };

    render() {

        return (
            <View style={{flex:1,flexDirection:'column'}}>

                <View style={{height:50,backgroundColor: '#ccc'}}>
                    <View style={styles.root}>
                        <View style={{flex:1}}>
                            <TextInput style={[styles.input]} returnKeyType={'search'} placeholder={'item'} autoComplete={'name'} ref={'input'}
                                       /*onChange={(result)=>{
                                           this.state.text = result.nativeEvent.text;
                                       }}*/
                                       onChangeText={this._getValue}
                                /*
                                onKeyPress={(result)=>{
                                    alert(result.nativeEvent.key)
                                }}*/
                                       secureTextEntry={true}
                                       selectionColor={'red'}
                            />
                        </View>
                        <View style={[styles.txt]}>
                            <TouchableOpacity onPress={()=>{alert('asd')}}>
                                <Text style={[styles.search]} onPress={this._onClick}>
                                    Search
                                </Text>
                            </TouchableOpacity>

                        </View>

                    </View>
                </View>

                <WebView source={{ uri: 'https://facebook.github.io/react-native/' }} />

                {this.state.isShow?
                    <Image
                        resizeMode="stretch"
                        style={{width: 400,height:200}}
                        source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556364981618&di=9ba3380e0994ca8b33dc0563706c9334&imgtype=0&src=http%3A%2F%2Fpic166.nipic.com%2Ffile%2F20180525%2F11949215_160416395000_2.jpg'}}
                        onLoad={()=>{
                            ShowToast('加载成功完成');
                        }}
                        onError={()=>{
                            ShowToast('加载错误');
                        }}
                    /> : null}
            </View>
        );
    }


}

// 构建样式
const styles = StyleSheet.create({
    root:{
        flex:1,
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    input:{
        height:45,
        marginLeft:5,
        marginRight:5,
        borderWidth:1,
        borderRadius:4,
        borderColor:'#fff',
        paddingLeft:5,
        paddingRight:5,
    },
    txt:{
        width:55,
        marginLeft: -5,
        marginRight: 5,
        backgroundColor:'#23BEDD',
        height: 45,
        justifyContent:'center',
        alignItems:'center',
    },
    search:{
        color:'#FFF',
        fontSize:15,
        fontWeight: 'bold',
    },
});